<script setup lang="ts">
import { getCurrentInstance, ref } from 'vue'

import { onShow } from '@dcloudio/uni-app'
import { get } from 'lodash-es'
import { navigateTo } from '@uni-helper/uni-promises'
import user from '@/composables/user'
import { getMonthDayProjectList, getProjectCount } from '@/api/project/index'
import type { ProjectDto } from '@/api/project/type'
import { putLeftDelete } from '@/api/job-record'
import NavbarContainer from '@/components/NavbarContainer.vue'

const projectList = ref<ProjectDto[]>([] as ProjectDto[])
const pageInfo = ref({
    pageNum: 1,
    pageSize: 10,
    hasNextPage: true,
    total: 0,
})
const swipeAction = ref()

const options = ref([
    {
        text: '删除',
        style: {
            backgroundColor: '#ff0000',
        },
    },
])

async function getList() {
    const res = await getMonthDayProjectList({
        id: user.userInfo.value.userId,
        pageNum: pageInfo.value.pageNum,
        pageSize: pageInfo.value.pageSize,
    })
    pageInfo.value.total = res.totalCount
    pageInfo.value.hasNextPage = res.hasNextPage
    if (pageInfo.value.pageNum === 1)
        projectList.value = res.list
    else
        projectList.value = projectList.value.concat(res.list)
}
function onToLogin() {
    navigateTo({
        url: '/pages/login/login',
    })
}

function onToDetail(item: ProjectDto) {
    navigateTo({
        url: `/package-clock/pages/clock-detail/clock-detail?projectId=${item.projectId}&type=${item.type}`,
    })
}

async function onScanCode() {
    let { result } = await uni.scanCode({})
    if (result.includes('scene%3D'))
        result = decodeURIComponent(result)

    console.log('result', result)
    const scene = result?.split('&scene=')[1]

    if (result.includes('qrcodeType=fast-insurance')) {
        console.log(1)
        navigateTo({
            url: `/pages/fast-insurance-status/fast-insurance-status?scene=${scene}`,
        })
    }
    else {
        console.log(2)
        navigateTo({
            url: `/pages/join/join?scene=${scene}`,
        })
    }
}

// const res = my.ap.openAlipayApp({
//     appCode: 'alipayScan',
// })

// console.log(11111, res)

async function onRemove(item: ProjectDto, index: number) {
    const res = await uni.showModal({
        title: '提示',
        content: '确认在列表中移除改工作吗？',
    })

    if (res.confirm)
        await putLeftDelete({ id: item.recordId, isShow: 0 })

    uni.showModal({
        title: '提示',
        content: '如需查看或复原，请在“我的” -- “工作记录”中操作',
        showCancel: false,
    })
    swipeAction.value.$children[index].close()
    pageInfo.value.pageNum = 1
    getList()
}

onPullDownRefresh(async () => {
    pageInfo.value.pageNum = 1
    await getList()
    uni.stopPullDownRefresh()
})

onReachBottom(async () => {
    if (pageInfo.value.hasNextPage) {
        pageInfo.value.pageNum++
        await getList()
    }
})

onShow(async () => {
    const instance = getCurrentInstance()
    const scope = get(instance, 'proxy.$scope', {}) as AnyObject
    if (typeof scope.getTabBar === 'function' && scope?.getTabBar()) {
        scope.getTabBar().setData({
            selected: 1,
        })
    }

    await user.waitLogin()

    if (pageInfo.value.total === 0) {
        getList()
    }
    else {
        const totalCount = await getProjectCount()
        if (totalCount !== pageInfo.value.total) {
            pageInfo.value.pageNum = 1
            getList()
        }
    }
})
</script>

<script lang="ts">
// #ifdef MP-ALIPAY
export default {
    options: {
        virtualHost: true,
        styleIsolation: 'shared',
    },
}
// #endif
</script>

<template>
    <NavbarContainer is-tab nav-color="#fff" left-text="" left-icon=""
                     background-url="https://bullet001.oss-cn-shanghai.aliyuncs.com/file/payManager363631e9-06ab-476d-890f-a9978e34dd83.png">
        <view class="h-full flex flex-col">
            <view class="my-32rpx box-border h-178rpx w-full flex-shrink-0 px-32rpx" @click="onScanCode">
                <view class="card-bg box-border flex items-center justify-between px-28rpx">
                    <view class="flex items-center">
                        <image src="../../static/images/clock/icon-qrcode.png"
                               class="relative z-10 mr-33rpx h-114rpx w-114rpx" />
                        <view>
                            <view class="text-36rpx text-white font-bold">扫一扫</view>
                            <view class="mt-16rpx text-28rpx text-white text-op-80">加入发薪项目或投保项目</view>
                        </view>
                    </view>
                    <image src="../../static/images/clock/icon-right.png" class="h-42rpx w-42rpx" />
                </view>
            </view>
            <view class="h-full flex-1 rounded-lt-24rpx rounded-rt-24rpx bg-white px-30rpx pt-10rpx">
                <view class="mb-30rpx mt-30rpx text-lg text-lightgray">工作提醒</view>
                <view v-if="!user.isLogin.value">
                    <view class="flex flex-col items-center justify-center text-center text-xs text-gray">
                        <view>
                            <image class="my-auto mt-230rpx h-158rpx w-188rpx"
                                   src="../../static/images/square/no-data2.png" alt="" />
                            <view class="mt-20rpx text-lg text-lightgray">暂无数据 登录才能管理任务</view>
                            <view
                                class="mt-30rpx h-94rpx w-420rpx rounded-full bg-orange text-32rpx text-white lh-94rpx"
                                @click="onToLogin">
                                <text>去登录</text>
                            </view>
                        </view>
                    </view>
                </view>
                <view v-else>
                    <view v-if="!projectList?.length">
                        <view class="flex flex-col items-center justify-center text-center text-xs text-gray">
                            <view>
                                <view>
                                    <img class="my-auto mt-230rpx h-158rpx w-188rpx"
                                         :src="`../../static/images/square/no-data${user.isLogin.value ? '' : '2'}.png`"
                                         alt="">
                                    <view class="mt-30rpx text-center text-lg text-lightgray">您还没有项目</view>
                                    <view
                                        class="mt-30rpx h-94rpx w-420rpx rounded-full bg-orange text-32rpx text-white lh-94rpx"
                                        @click="onScanCode">
                                        <text>扫一扫加入项目</text>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                    <view v-else>
                        <uni-swipe-action ref="swipeAction">
                            <uni-swipe-action-item v-for="(i, index) in projectList" :key="index"
                                                   :right-options="options" :auto-close="false" @click="onRemove(i, index)">
                                <view
                                    class="box-border w-full flex items-center justify-between rounded-lg bg-bgColor p-30rpx"
                                    @click="onToDetail(i)">
                                    <view class="flex items-center">
                                        <image class="mr-20rpx h-82rpx w-82rpx"
                                               :src="`../../static/images/clock/${i.type === 1 ? 'long-worker' : 'day-laborer'}.png`" />
                                        <view>
                                            <view class="text-lg text-black font-bold">{{ i.projectName }}</view>
                                            <view class="mt-18rpx text-xs text-lightgray">加入时间：{{ i.date }}</view>
                                        </view>
                                    </view>
                                    <image class="h-46rpx w-46rpx" src="../../static/images/arrow-right.png" />
                                </view>
                            </uni-swipe-action-item>
                        </uni-swipe-action>
                    </view>
                </view>
            </view>
        </view>
    </NavbarContainer>
</template>

<style lang="scss" scoped>
.set-bg {
    background: url('https://bullet001.oss-cn-shanghai.aliyuncs.com/file/payManager363631e9-06ab-476d-890f-a9978e34dd83.png') no-repeat;
    height: 600rpx;
}

.card-bg {
    background: linear-gradient(103deg, #FF7642 0%, #FF9E79 97%);
    border-radius: 32rpx;
    height: 100%;
    position: relative;
    overflow: hidden;

    &::after {
        content: '';
        position: absolute;
        top: 104rpx;
        left: -88rpx;
        width: 296rpx;
        height: 296rpx;
        border-radius: 148rpx;
        background: linear-gradient(112deg, rgba(255, 118, 66, 0) 15%, #FF7642 67%);
    }
}

:deep(.uni-swipe) {
    margin-bottom: 30rpx;
}

:deep(.uni-swipe_button) {
    border-radius: 16rpx;
}
</style>

<route lang="json">
{
    "style": {
        "enablePullDownRefresh": true
    }
}
</route>
